<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Backbone Demo</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Underscore-1.8.3.js"></script>
		<script src="js/backbone.js"></script>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<button id="check">新手报道</button>  
		<ul id="world-list">
		</ul>
		<script type="text/javascript">
			(function($){
				var World=Backbone.Model.extend({
					//创建一个world对象，拥有name属性
					name:null
				});
				var Worlds=Backbone.Collection.extend({
					//world对象集合
					initialize:function(models,options){
						 this.bind("add",options.view.addOneWorld);
					}
				});
				AppView=Backbone.View.extend({
					el:$("body"),
					initialize:function(){
						//构造函数，实例化一个world集合类，并且一字典的方式传入APPView的对象
						this.worlds=new Worlds(null,{view:this});
					},
					events:{
						"click #check":"checkIn",//事件绑定，绑定dom中的id为check的元素
					},
					checkIn:function(){
						var world_name=prompt("请问，您是那星球的人？");
						if(world_name=="")world_name='未知';
						
						var world=new World({name:world_name});
						this.worlds.add(world);
					},
					addOneWorld:function(model){
						$("#world-list").append("<li>这里是来自<b>"+model.get("name")+"</b>星球的问候：hello world!</li>");
					}
				});
				var appView=new AppView;
			})(jQuery);
		</script>
	</body>
</html>